<template>
  <a-modal
    :visible="visible"
    title="审核详情"
    okText="通过提交"
    width="640px"
    @ok="submitAudit"
    @cancel="handleCancel"
  >
    <a-row>
      <a-col :span="24">
        <a-descriptions
          :column="2"
          style="padding: 20px; background: #efefef; border-bottom: 1px solid #e8e8e8"
        >
          <a-descriptions-item label="提交人">{{detail.driverName}}</a-descriptions-item>
          <a-descriptions-item label="提交时间">{{detail.submitTime}}</a-descriptions-item>
          <a-descriptions-item label="审核人">{{detail.auditorName}}</a-descriptions-item>
          <a-descriptions-item label="审核时间">{{detail.auditTime ? detail.auditTime:'--'}}</a-descriptions-item>
        </a-descriptions>

        <a-form-model
          :model="form"
          ref="rulesForm"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-col :span="24" v-if="!isApplyType1()">
            <a-col :span="12">
              <a-form-model-item label="加油卡卡号">{{detail.cardNo}}</a-form-model-item>
            </a-col>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车辆">{{detail.truckNumber}}</a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="司机">{{detail.driverName}}</a-form-model-item>
          </a-col>

          <template v-if="isApplyType1()">
            <a-col :span="12">
              <a-form-model-item label="加油量(L)" prop="oilVolume">
                <a-input-number
                  :min="0"
                  v-model="form.oilVolume"
                  @change="checkPurchaseByOilVolume"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="交易金额(元)">{{type2Data.totalAmount}}</a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="当前里程(km)" prop="mileage">
                <a-input-number
                  :min="0"
                  :max="999999999999.99"
                  :precision="2"
                  v-model="form.mileage"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="交易金额明细" :labelCol="{span:4}" :wrapperCol="{span: 20}">
                <a-table
                  size="small"
                  :columns="type2Columns"
                  :data-source="type2Data.purchaseList"
                  :pagination="false"
                  rowKey="purchaseId"
                ></a-table>
              </a-form-model-item>
            </a-col>
          </template>

          <template v-if="!isApplyType1()">
            <a-col :span="24">
              <a-col :span="12">
                <a-form-model-item label="交易金额(元)" prop="totalAmount">
                  <a-input-number
                    :min="0"
                    v-model="form.totalAmount"
                    :precision="2"
                    :max="999999999999.99"
                    @blur="totalAmountStr"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="余额(元)">{{detail.accountAmount}}</a-form-model-item>
              </a-col>
            </a-col>
            <a-col :span="24">
              <a-col :span="12">
                <a-form-model-item label="单价(元/L)">
                  <!-- <a-input-number :min='0' :precision="2" :max="999999999999.99" v-model="" @blur="priceStr"/> -->
                  {{form.price}}
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="加油量(L)" prop="oilVolume">
                  <a-input-number
                    :min="0"
                    :precision="2"
                    v-model="form.oilVolume"
                    @blur="oilVolumeStr"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="当前里程(km)" prop="mileage">
                  <a-input-number
                    :min="0"
                    :max="999999999999.99"
                    :precision="2"
                    v-model="form.mileage"
                  />
                </a-form-model-item>
              </a-col>
            </a-col>
          </template>

          <a-col :span="24">
            <a-form-model-item
              label="加油凭证"
              :labelCol="{span:4}"
              :wrapperCol="{span: 20}"
              prop="voucherPics"
            >
              <!-- <viewer :images="voucherPicsArr" :options="{url: 'data-x'}">
                <template v-for="(src,index) in voucherPicsArr">
                  <img
                    style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                    :src="`${src}?x-oss-process=image/resize,h_100`"
                    :data-x="src"
                    :key="index"
                    v-if="src"
                  />
                </template>
              </viewer>-->
              <ud-upload @uploadFile="voucherPicsUpload" :length="9" :optList="voucherPicsArr"></ud-upload>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { queryTruckOilInApplyDetail, queryPurchaseByOilVolume, auditTruckOilInApply } from '@/api/landCenter'
import 'viewerjs/dist/viewer.css'
import upload from '@/components/UpLoad'
const fomrMessage = `必填项不能为空`
const defaultForm = () => ({
  oilVolume: '',
  totalAmount: '',
  price: '--',
  mileage: '',
  voucherPics: ''
})

export default {
  props: {
    visible: Boolean,
    record: Object
  },
  data () {
    return {
      detail: {
        voucherPics: ''
      },
      labelCol: { span: 9 },
      wrapperCol: { span: 15 },
      form: defaultForm(),
      rules: {
        oilVolume: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        totalAmount: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        price: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        mileage: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        voucherPics: [{ required: true, message: fomrMessage }]
      },
      type2Columns: [{
        title: '采购批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }],
      type2Data: {
        totalAmount: '--',
        purchaseList: []
      }
    }
  },
  components: {
    'ud-upload': upload
  },
  computed: {
    voucherPicsArr () {
      return this.detail.voucherPics ? this.detail.voucherPics.split(',') : null
    }
  },
  methods: {
    voucherPicsUpload (urls) {
      this.form.voucherPics = urls
    },
    isApplyType1 () {
      return this.record ? this.record.applyType === 1 : false
    },
    checkPurchaseByOilVolume () {
      const oilVolume = this.form.oilVolume
      if (oilVolume) {
        queryPurchaseByOilVolume({ oilVolume }).then(rsp => {
          this.type2Data = rsp.data
        })
      } else {
        this.type2Data = {
          totalAmount: '--',
          purchaseList: []
        }
      }
    },
    handleCancel () {
      this.$emit('setVisible')
    },
    submitAudit () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          auditTruckOilInApply({
            oilVolume: this.form.oilVolume,
            totalAmount: this.form.totalAmount,
            price: this.form.price,
            applyId: this.record.applyId,
            applyType: this.record.applyType,
            mileage: this.form.mileage,
            voucherPics: this.form.voucherPics
          }).then(rsp => {
            this.$message.success('通过提交')
            this.$emit('setVisible', true)
          })
        }
      })
    },
    totalAmountStr () {
      const v = this.form.totalAmount
      if (this.form.oilVolume && v) this.form.price = Math.round(v / this.form.oilVolume * 100) / 100
      else this.form.price = '--'
    },
    oilVolumeStr () {
      const v = this.form.oilVolume
      if (this.form.totalAmount && v) this.form.price = Math.round(this.form.totalAmount / v * 100) / 100
      else this.form.price = '--'
    }
  },
  watch: {
    visible () {
      this.form = defaultForm()
      if (this.visible && this.record) {
        queryTruckOilInApplyDetail({ applyId: this.record.applyId, applyType: this.record.applyType }).then(rsp => {
          this.detail = rsp.data
          Object.assign(this.form, rsp.data)
          if (this.record.applyType === 1) this.checkPurchaseByOilVolume()
        })
      }
    }
  }
}
</script>
